<template>
  <div>
    <el-dialog
      class="dialog"
      :title="'开启' + thistitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="59%"
      :before-close="closeDialog"
    >
      <el-form :model="form">
        <el-form-item :label="thistitle + '名称'" label-width="">
          <el-input
            size="small"
            class="fireWidth"
            v-model="form.title"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label="thistitle + '简介'" label-width="">
          <el-input
            type="textarea"
            :rows="5"
            :autosize="{ minRows: 5, maxRows: 5 }"
            class="fireWidth"
            v-model="form.info"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="单位" label-width="">
          <el-input
            size="small"
            class="fireWidth"
            v-model="form.unitName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item :label="thistitle + '开始时间'">
              <el-date-picker
                size="small"
                v-model="form.startTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="thistitle + '开始时间'">
              <el-date-picker
                size="small"
                v-model="form.stopTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="thistitle + '产品主图片'">
          <ul class="fireWidth flexbox">
            <li class="imgList" v-if="form.image">
              <el-image class="elimg" :src="form.image"> </el-image>
              <div class="iconBg">
                <div class="ibox">
                  <i @click="lookBigimg('star')" class="el-icon-view"></i>
                  <i @click="delImg('str')" class="el-icon-delete"></i>
                </div>
              </div>
            </li>
            <li
              v-if="!form.image"
              class="addImage"
              @click="dialogVisiblePicFn(1)"
            >
              <i class="el-icon-plus"></i>
            </li>
          </ul>
        </el-form-item>
        <el-form-item :label="thistitle + '产品轮播图'">
          <ul class="fireWidth flexbox">
            <li
              class="imgList"
              v-for="(img, index) in form.images"
              :key="index"
            >
              <el-image class="elimg" :src="img"> </el-image>
              <div class="iconBg">
                <div class="ibox">
                  <i
                    v-if="index != 0"
                    @click="imgtoLeft(index)"
                    class="el-icon-back"
                  ></i>
                  <i @click="lookBigimg(index)" class="el-icon-view"></i>
                  <i @click="delImg(index)" class="el-icon-delete"></i>
                  <i
                    v-if="index != form.images.length - 1"
                    @click="imgtoRight(index)"
                    class="el-icon-right"
                  ></i>
                </div>
              </div>
            </li>
            <li
              v-if="form.images != undefined && form.images.length <= 3"
              class="addImage"
              @click="dialogVisiblePicFn(4)"
            >
              <i class="el-icon-plus"></i>
            </li>
          </ul>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="库存">
              <el-input-number
                size="small"
                v-model="form.stock"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销量">
              <el-input-number
                size="small"
                v-model="form.sales"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="砍价金额">
              <el-input-number
                size="small"
                v-model="form.price"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="允许砍到最低价">
              <el-input-number
                size="small"
                v-model="form.minPrice"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="限购">
              <el-input-number
                size="small"
                v-model="form.num"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单次砍最高价">
              <el-input-number
                size="small"
                v-model="form.bargainMaxPrice"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单次砍最低价">
              <el-input-number
                size="small"
                v-model="form.bargainMinPrice"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户每次砍价的次数">
              <el-input-number
                size="small"
                v-model="form.bargainNum"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="单次砍最低价">
              <el-radio v-model="form.status" :label="1">开启</el-radio>
              <el-radio v-model="form.status" :label="0">关闭</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本价">
              <el-input-number
                size="small"
                v-model="form.cost"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="排序">
              <el-input-number
                size="small"
                v-model="form.sort"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="thistitle + '规则'" label-width="">
          <MyEditor :rule="form.rule" @input="input"></MyEditor>
        </el-form-item>
        <el-form-item :label="thistitle + '详情'" label-width="">
          <MyEditor1
            :description="form.description"
            @input1="input1"
          ></MyEditor1>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="closeDialog">取 消</el-button>
        <el-button size="small" type="primary" @click="addSubmit"
          >确 认</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="imgVisible" class="dialog2">
      <img width="100%" :src="thisimg" alt="" />
    </el-dialog>
    <picchoose
      :dialogVisiblePic="dialogVisiblePic"
      ref="dialogVisiblePic"
      @closeDialogpic="closeDialogpic"
      @PicTrue="PicTrue"
      :imagesNum="form.images ? form.images.length : 0"
      @PicTrueList="PicTrueList"
      :checkNum="checkNum"
    >
    </picchoose>
  </div>
</template>

<script>
import MyEditor from "@/components/MyEditor.vue";
import MyEditor1 from "@/components/MyEditor1.vue";
import picchoose from "@/components/picchoose.vue";
export default {
  components: { MyEditor, MyEditor1, picchoose },
  name: "EditPopup",
  data() {
    return {
      dialogVisiblePic: false,
      checkNum: 1,
      form: {},
      imgVisible: false,
      thisimg: "",
    };
  },
  mounted() {
    console.log(this.sendtoPopup);
  },
  methods: {
    PicTrueList(array) {
      let _self = this;
      console.log(array);
      if (_self.form.images.length != 0) {
        _self.form.images = _self.form.images.concat(array);
      } else {
        _self.form.images = array;
      }
      _self.$refs.dialogVisiblePic.dialogVisiblePic = false;
    },
    PicTrue(src) {
      let _self = this;
      console.log(src);
      _self.form.image = src;
      _self.$refs.dialogVisiblePic.dialogVisiblePic = false;
    },
    // 打开图片弹窗
    dialogVisiblePicFn(num) {
      let _self = this;
      _self.checkNum = num;
      _self.$refs.dialogVisiblePic.dialogVisiblePic = true;
    },
    // 关闭图片弹窗
    closeDialogpic() {
      let _self = this;
      _self.$refs.dialogVisiblePic.dialogVisiblePic = false;
    },
    // 删除图片
    delImg(index) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (isNaN(index)) {
            this.form.image = "";
          } else {
            this.form.images.splice(index, 1);
          }
        })
        .catch(() => {});
    },
    //点击查看大图
    lookBigimg(index) {
      if (isNaN(index)) {
        this.thisimg = this.form.image;
      } else {
        this.thisimg = this.form.images[index];
      }
      this.$nextTick(() => {
        this.imgVisible = true;
      });
    },
    // 左移轮播图
    imgtoLeft(index) {
      for (let i in this.form.images) {
        if (index == i) {
          let temp = this.form.images[i];
          this.$set(this.form.images, i, this.form.images[i - 1]);
          this.$set(this.form.images, i - 1, temp);
        }
      }
    },
    // 右移轮播图
    imgtoRight(index) {
      for (let i in this.form.images) {
        if (index == i) {
          let temp = this.form.images[+i + 1];
          this.$set(this.form.images, +i + 1, this.form.images[i]);
          this.$set(this.form.images, +i, temp);
        }
      }
    },
    // 规则传值
    input(rule) {
      this.form.rule = rule;
    },
    // 详情传值
    input1(description) {
      this.form.description = description;
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit("closePopup");
    },
    // 保存修改
    addSubmit() {
      this.$emit("editingCompleted", this.form);
    },
  },
  watch: {
    dialogFormVisible(newVal) {
      this.dialogFormVisible = newVal;
    },
    sendtoPopup: {
      deep: true,
      handler(nowData) {
        if (!Array.isArray(nowData.images)) {
          nowData.images = nowData.images.split(",");
        }
        this.form = JSON.parse(JSON.stringify(nowData));
        console.log(this.form);
      },
    },
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      required: true,
    },
    thistitle: {
      type: String,
      required: true,
    },
    sendtoPopup: {},
  },
};
</script>

<style lang="less">
.dialog2 .el-dialog {
  width: 35%;
  text-align: center;
  margin: 0 auto;
}
.addImage {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  &:hover {
    border-color: #1890ff;
  }
  i {
    font-size: 28px;
    color: #8c939d;
  }
}
ul {
  list-style: none;
}
.flexbox {
  display: flex;
  flex-wrap: wrap;
}
.el-dialog__header {
  position: sticky;
  top: 0px;
  background: #fff;
  z-index: 20000;
}
.el-dialog__footer {
  position: sticky;
  bottom: -14px;
  z-index: 10001;
  background: #fff;
}
.dialog .el-dialog {
  position: relative;
  min-width: 800px;
  margin-top: 5vh !important;
  max-height: 88vh;
  overflow-y: scroll;
}
.dialog .el-form-item {
  display: flex;
  white-space: nowrap;
  .fireWidth {
    width: 500px;
    .imgList {
      height: 150px;
      width: 150px;
      position: relative;
      margin-right: 8px;
      margin-bottom: 8px;
      &:hover .iconBg {
        display: block;
      }
      .iconBg {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        display: none;
        height: 150px;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.3s;
        &:hover {
          background-color: rgba(0, 0, 0, 0.5);
        }
        .ibox {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          i {
            font-size: 20px;
            color: #fff;
            cursor: pointer;
          }
        }
      }
      .elimg {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #c0ccda;
      }
    }
  }
  .el-form-item__label {
    font-weight: bold;
    color: #606266;
    vertical-align: middle;
    font-size: 14px;
  }
}
.dialog .el-form-item__label {
  width: 130px;
  padding-right: 10px;
  overflow: hidden;
  white-space: nowrap;
}
</style>